<template>
  <!-- 容器元素 -->
  <div class="container">
    <!-- 上传组件 -->
    <el-upload
      name="carousel"
      :action="action"              
      :show-file-list="false"      
      :data="{ id: user.id }"      
      :headers="{ authorization }" 
      :before-upload="beforeUpload"
      :on-progress="onProgress"    
    >
      <!-- 上传按钮 -->
      <el-button size="small" type="primary">选择上传的文件</el-button>
    </el-upload>

    <!-- 显示文件信息的表格 -->
    <el-table :data="carousel">
      <!-- 文件名列 -->
      <el-table-column label="文件名" prop="name"></el-table-column>

      <!-- 文件大小列 -->
      <el-table-column label="大小" prop="szie">
        <!-- 自定义列内容，显示文件大小 -->
        <template v-slot="{ row }">
          <span>{{ row.size }}kb</span>
        </template>
      </el-table-column>

      <!-- 上传进度列 -->
      <el-table-column label="进度">
        <!-- 自定义列内容，显示上传进度条 -->
        <template v-slot="{ row }">
          <el-progress
            :percentage="row.percent"
            :show-text="false"
          ></el-progress>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from "axios"; // 引入axios库

export default {
  name: "CarouselList",
  data() {
    return {
      // 上传接口的URL
      action: import.meta.env.VITE_SERVE_BASE_URL + "/carousel/backend/add",
      // 从本地存储中获取 authorization 信息
      authorization: localStorage.getItem("authorization"),
      // 从本地存储中获取用户信息
      user: JSON.parse(localStorage.getItem("user")),
      // 存放文件上传信息的数组
      carousel: [],
    };
  },
  methods: {
    // 获取图片URL的方法
    getImgUrl(url) {
      return import.meta.env.VITE_SERVE_BASE_URL + "/" + url;
    },
    // 上传前的钩子函数
    beforeUpload(file) {
      this.carousel.push({
        name: file.name,  // 文件名
        uid: file.uid,    // 文件唯一标识符
        percent: 0,      // 上传进度初始为0
        size: file.size, // 文件大小
      });
    },
    // 上传进度的回调函数
    onProgress(e, file) {
      // 查找对应文件在 carousel 数组中的索引
      let index = this.carousel.findIndex((val) => val.uid === file.uid);
      if (index !== -1) {
        // 更新文件的上传进度
        let data = this.carousel[index];
        data.percent = e.percent;
        // 使用新的数据对象替换旧的对象，确保响应式更新
        this.carousel.splice(index, 1, data);
      }
    },
  },
};
</script>
